<template lang="html">
  <div class="TanDramaBox" v-loading.body="loading">
    <form id="form1">
    <el-row>
      <el-col :span="3" class="text-right" style="margin-bottom:10px;" >
        <span >剧场名：</span>
      </el-col>
      <el-col :span="6" >
        <el-input v-model="dramaName" size="small"></el-input>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="3" class="text-right" style="margin-bottom:10px;">
        <span >所在地：</span>
      </el-col>
      <el-col :span="4">
        <el-select v-model="add1" size="small" @change="getadd2" placeholder="请选择">
          <el-option
            v-for="(item,index) in options"
            :key="index"
            :data-id="index"
            :label="item.name"
            :value="item.code">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4" class="add" style="margin-left:10px;">
        <el-select v-model="add2" size="small" @change="getadd3" placeholder="请选择">
          <el-option
            v-for="item in options2"
            :key="item.name"
            :label="item.name"
            :value="item.code">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4" class="add" style="margin-left:10px;">
        <el-select size="small" v-model="add3" placeholder="请选择">
          <el-option
            v-for="item in options3"
            :key="item"
            :label="item.name"
            :value="item.code">
          </el-option>
        </el-select>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="3" class="text-right" style="margin-bottom:10px;" >
        <span >详细地址：</span>
      </el-col>
      <el-col :span="6" >
        <el-input v-model="address" size="small" ></el-input>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="3" class="text-right" style="margin-bottom:10px;" >
        <span >分区名称：</span>
      </el-col>
      <el-col :span="12" class="text-left">
        <el-tag
          v-for="tag in tags"
          :key="tag.name"
          :closable="true"
          @close="handleClose(tag)"
          :type="tag.type">
          {{tag.name}}
        </el-tag>
        <span style="display:inline-block; width:120px;">
          <el-input
            class="input-new-tag"
            v-if="inputVisible"
            v-model="inputValue"
            ref="saveTagInput"
            size="small"
            @keyup.enter.native="handleInputConfirm"
            @blur="handleInputConfirm"
          >
          </el-input>
          <el-button v-else class="button-new-tag" size="mini" @click="showInput">+ 新增标签</el-button>
        </span>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-button type="success" @click="sub">保存</el-button>
      </el-col>
    </el-row>
    </form>
  </div>
</template>

<script>
import axios from 'axios'
var url;

export default {
  data(){
    return {
      dramaName:'',
      address:'',
      options:[],
      options2:[],
      options3:[],
      add1:'',
      add2:'',
      add3:'',
      tags: [],
      inputVisible: false,
      inputValue: '',
      loading:false
    }
  },
  methods:{
    sub:function (){
      // this.$store.dispatch('closeDialog','TanMerchants');
      // this.$store.dispatch('showLoading','TanMerchants');
      document.getElementById("form1").reset();
      var that=this;
      var str='';
      that.loading=true;
      for(let i=0;i<this.tags.length;i++){
        str=str+this.tags[i].name+','
      }
      str=str.substring(0,str.length-1);
      axios.get(url+'/v1/businessmen/post/theater',{
        params:{
          address:that.address,
          name:that.dramaName,
          provinceCode:this.add1,
          cityCode:that.add2,
          areaCode:that.add3,
          areaNames:str
        }
      }).then((res)=>{
        if(res.data.code==0){
          that.$message({
            message: '添加成功',
            type: 'success',
            duration:'1500'
          });
          this.tags=[];
          that.add1='';
          that.add2='';
          that.add3='';
          var json={
            cityCode:'',
            name:'',
            pageCount:10,
            pageIndex:1
          }
          that.$store.dispatch('getMerchantsDrama',json);
          this.$store.dispatch('closeDialog','TanMerchants');
          that.loading=false;
        }else{
          that.$message({
            showClose: true,
            message: res.data.msg,
            type: 'error'
          });
          that.loading=false;
        }

      }).catch((err)=>{
        that.$message({
          showClose: true,
          message: '错误：'+err,
          type: 'error'
        });
      });
      this.$store.dispatch('closeDialog','TanMerchants')
    },
    getadd2:function (){
      this.add2='';
      this.add3='';
      axios.get(url+'/v1/comm/gets/city',{
         params:{
           'parentCode':this.add1
         }
      }).then((res)=>{
         this.options2=res.data.data;
      }).catch((err)=>{
         this.$message({
           showClose: true,
           message: '错误:'+err,
           type: 'error'
         });
      })
    },
    getadd3:function (){
      this.add3='';
      axios.get(url+'/v1/comm/gets/city',{
         params:{
           'parentCode':this.add2
         }
      }).then((res)=>{
         this.options3=res.data.data;
      }).catch((err)=>{
         this.$message({
           showClose: true,
           message: '错误:'+err,
           type: 'error'
         });
      })
    },
    handleClose(tag) {
      var that= this;
       this.tags.splice(that.tags.indexOf(tag), 1);
     },
     showInput() {
       this.inputVisible = true;
       this.$nextTick(_ => {
         this.$refs.saveTagInput.$refs.input.focus();
       });
     },
     handleInputConfirm() {
       let inputValue = this.inputValue;
       console.log(inputValue);
       if (inputValue) {
         let json1={
           name:inputValue,
           type:'gray'
         }
         this.tags.push(json1);
       }
       this.inputVisible = false;
       this.inputValue = '';
     },
     getCity:function (){
       axios.get(url+'/v1/comm/gets/city',{
        params:{}
      }).then((res)=>{
        this.options=res.data.data;
      }).catch((err)=>{
        this.$message({
          showClose: true,
          message: '错误:'+err,
          type: 'error'
        });
      })
     }
  },
  created(){
    url=this.$store.state.url;
    this.getCity();
  }
}
</script>

<style lang="Sass" scoped>
  .TanDramaBox{line-height: 30px;
    span{font-size: 13px;}
    .el-tag:first-child{margin-left: 0;}
    .el-tag{margin-left: 10px;}
    .el-button{font-size: 13px;}
  }
</style>
